<template>
  <div class="navBox">
    <div class="navLogo"></div>
    <div class="navMenu">
      <div
        v-for="(item,index) in menuOption"
        @click.stop="setMenuChange(item)"
        :class="{'navMenuChecked': menuFlag == item.id}"
      >{{item.name}}</div>
    </div>
    <div class="navSetUp">

    </div>
  </div>
</template>

<script  scope setup>
import menuData from "@/assets/js/data/menuData";
import {
  ref,
  onMounted,
  onBeforeUnmount,
  reactive,
  defineProps,
  defineEmits
} from "vue";
//路由
import { useRouter } from "vue-router";
const router = useRouter();
//定义变量
const menuOption = ref([]);
const menuFlag = ref(null);
const setMenuStart = () => {
  menuOption.value = menuData.naveMenu;
  menuFlag.value = menuOption.value[0].id;

};
const setMenuChange = (res) => {
  menuFlag.value = res.id;
  router.push(res.path);
};
//页面初始化后方法
onMounted(() => {
  setMenuStart();
});
</script>

<style lang="less">
.navBox {
  width: 100%;
  height: 100%;
  display: flex;
  .navLogo {
    width: 409px;
    height: 100%;
    background: url("@/assets/image/装饰／系统名底.png") no-repeat;
    background-size: 100% 100%;
  }
  .navMenu {
    height: 100%;
    flex: 1;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: rgba(14, 22, 32, 0.6);
    line-height: 40px;
    font-size: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .navMenuChecked {
    color: #00a6e2;
  }
  .navSetUp{
    width: 20%;
  }
}
</style>